<template>
  <div>
    <div class="top-bar">
      <div class="item-count">数量:{{ number }}</div>
      <span @click="toggleDelState">
        {{ delState ? "取消" : "管理" }}
      </span>
    </div>
    <div class="items">
      <div class="item" v-for="item in items" :key="item.id">
        <van-checkbox
          v-model="item.selected"
          @change="changeItemSelected(item.key, item.selected)"
        />
        <van-card
          :num="item.number"
          :price="item.price"
          :title="item.name"
          :thumb="item.pic"
        >
          <template #footer>
            <van-stepper
              v-model="item.number"
              @change="modiItemNum(item.key, item.number)"
              :min="1"
            />
          </template>
        </van-card>
      </div>
    </div>
    <van-submit-bar :price="total * 100" button-text="提交订单" @submit="onSubmit">
      <van-checkbox @change="clickAllChange" v-model="allChecked">全选</van-checkbox>
      <template #button>
        <van-button v-if="!delState" round type="danger" size="small"
          >提交订单</van-button
        >
        <van-button v-if="delState" round size="small">删除</van-button>
      </template>
    </van-submit-bar>
    <Tabbar />
  </div>
</template>

<script setup lang="ts" name="CartPage">
import Tabbar from "@/components/Tabbar.vue";
import {
  fetchCartInfo,
  modifyCartItemNum,
  removeCartItem,
  modifyCartSelected,
} from "@a/index";
import { all } from "axios";
import { ref, computed, onMounted } from "vue";
// 点击管理商品
const delState = ref<boolean>(false);
const toggleDelState = () => {
  delState.value = !delState.value;
};

// 商品总件数
const number = ref<number>(0);
// 总价格
const total = ref<number>(0);
// 购物车商品
const items = ref<any[]>([]);
// 是否全选
const allChecked = ref<boolean>(true);
// 修改商品购买数量

// 获取购物车中的数据
const getCartInfo = () => {
  fetchCartInfo().then((res) => {
    if (res.data.code === 0) {
      number.value = res.data.data.number;
      total.value = res.data.data.price;
      items.value = res.data.data.items;
      // 计算全选状态
      allChecked.value = items.value.every((item) => item.selected);
    }
  });
};

// 修改商品数量
const modiItemNum = (key: string, num: number) => {
  modifyCartItemNum({
    key,
    number: num,
  }).then((res) => {
    if (res.data.code === 0) {
      number.value = res.data.data.number;
      total.value = res.data.data.price;
      items.value = res.data.data.items;
      allChecked.value = items.value.every((item) => item.selected);
    }
  });
};
// 修改商品选中状态
const changeItemSelected = (key: string, selected: boolean) => {
  modifyCartSelected({
    key,
    selected,
  }).then((res) => {
    if (res.data.code === 0) {
      number.value = res.data.data.number;
      total.value = res.data.data.price;
      items.value = res.data.data.items;
      // 计算全选状态
      allChecked.value = items.value.every((item) => item.selected);
    }
  });
};
// 点击全选 修改所有商品选中状态
const clickAllChange = () => {
  // 将所有商品 key 存储到数组中
  const itemsKeys: string[] = [];
  items.value.forEach((item) => {
    itemsKeys.push(item.key);
  });
  // 修改所有商品选中状态
  changeItemSelected(itemsKeys.join(","), allChecked.value);
};
const onSubmit = () => {
  // 提交到订单页
};
onMounted(() => {
  getCartInfo();
});
</script>

<style scoped lang="scss">
.top-bar {
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  padding: 0 10px;
  height: 40px;
  background-color: #f1f1f1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.items {
  position: fixed;
  left: 0;
  top: 40px;
  right: 0;
  bottom: 100px;
  overflow-y: auto;
  .item {
    display: flex;
    background-color: var(--van-card-background);
    .van-checkbox {
      margin: 0 10px;
    }
    .van-card {
      flex: 1;
    }
  }
}
.van-submit-bar {
  bottom: 50px;
}
</style>
